<template>
  <div>
    <!--幻灯片-->
    <section class="ab_img">
      <img src="../assets/images/ab1.jpg" />
    </section>
    <!--关于我们-->
    <div class="about1">
      <div class="container">
        <div class="title1">
          <div class="title1_top">
            <h2>关于我们</h2>
          </div>
        </div>
        <div class="about_ys_con">
          <div class="ys_1 clearfix" v-if="introduce[0]">
            <div class="left_a2 wow fadeInRight">
              <span>{{ introduce[0].ctitle }}</span>
              <div class="yin_b">{{ introduce[0].etitle }}</div>
              <p>{{ introduce[0].content }}</p>
            </div>
            <div class="right_a2 wow fadeInRight">
              <img
                :src="require(`../assets/images/${introduce[0].png}`)"
                class="img-circle"
              />
            </div>
          </div>
          <div class="ys_2 clearfix" v-if="introduce[1]">
            <div class="left_a2 wow fadeInLeft">
              <p>
                {{ introduce[1].content }}
              </p>
            </div>
            <div class="right_a2 wow fadeInLeft">
              <img
                :src="require(`../assets/images/${introduce[1].png}`)"
                class="img-circle"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--医疗愿景-->
    <div>
      <div class="container-fluid">
        <div class="row">
          <div class="doctor1_top" v-if="vision[1]">
            <img :src="require(`../assets/images/${vision[1].png}`)" />
            <h3>{{ vision[1].title }}</h3>
            <p>
              爱岗敬业，团结合作，积极进取，真诚服务，努力提高专业水平，赶超世界一流水平
            </p>
            <p>
              珍爱生命，为宠物创造良好的生存环境，为宠物减轻疾病的痛苦，促进人与宠物间的协调发展。
            </p>
            <p>
              努力建设成为大型、转诊型、综合性、国际性宠物医院，建成国内一流的小动物医院，为您的宠物提供可靠的专业医疗服务。
            </p>
          </div>
        </div>
      </div>
    </div>
    <!--团队风采-->
    <diV class="team">
      <div class="container">
        <div class="title">
          <img src="../assets/images/h_1.png" class="title_img" />
          <div class="title_top">
            <h2>萌宠团队</h2>
            <span>Our Team</span>
          </div>
          <img src="../assets/images/h_2.png" class="title_img" />
        </div>
        <mt-swipe :auto="4000" class="mt-swipe team-list">
          <mt-swipe-item
            v-for="(item, index) of team"
            :key="index"
            class="item"
          >
            <div>
              <img :src="require(`../assets/images/${item.team_imge}`)" />
              <p class="name-t">{{ item.team_model }}</p>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </diV>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introduce: [],
      vision: [],
      team: [],
    };
  },
  mounted() {
    // 请求返回页面文章查询
    this.axios.get("/about/about_introduce").then((res) => {
      // console.log(res);
      this.introduce = res.data.result;
      // console.log(this.introduce);
    });
    // 请求返回愿景查询
    this.axios.get("/index/pet_vision").then((res) => {
      // console.log(res);
      this.vision = res.data.result;
    });
    // 请求团队接口查询
    this.axios.get("about/pet_team").then((res) => {
      // console.log(res);
      this.team = res.data.result;
    });
  },
};
</script>


<style scoped>
.title1_top h2,
.title_top h2 {
  font-size: 3rem;
}
.team_box {
  height: 30rem;
}
.mt-swipe {
  height: 50rem;
}
</style>
